<template>
  <div :class="curstatus">
    <h3>{{ title[curstatus] }}</h3>
    <ul v-if="list.length > 0">
      <div
        v-for="item of list"
        :key="item.id"
      >
        <input
          type="checkbox"
          :name="curstatus"
          :id="item.id"
          @click="setTodoItemStatus(curstatus,item.id)"
          :checked="curstatus === 'finished'"
        >
        <li>{{item.content}}</li>
        <input
          type="radio"
          @click="removeTodoItem(curstatus, item.id)"
        >
      </div>
    </ul>
  </div>
</template>

<script>
import { useTodoItem } from '@/hooks'
export default {
  name: 'Item',
  props: ['curstatus', 'list'],
  setup (props, { emit }) {
    const { title, removeTodoItem, setTodoItemStatus } = useTodoItem()
    return {
      title,
      setTodoItemStatus,
      removeTodoItem
    }
  }
}

</script>

<style >
ul div {
  display: flex;
  align-items: center;
}
li {
  width: 90%;
  overflow: hidden;
  padding: 0 4px;
}
.doing {
  background: #d35400;
  padding: 10px 4px;
  margin-bottom: 30px;
}
.finished {
  background: #27ae60;
  padding: 10px 4px;
}
.finished li {
  color: rgb(145, 92, 92);
}
input[type='radio'] {
  float: right;
  margin-right: 20px;
}
</style>
